<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Mark Of The Web- see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp for info why this is here -->
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WPF/E QuickStart: animations</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type='text/javascript' src='samples/aghost.js'></script>
</head>

<body>
<div class="header-section">
<table>
  <tr>
  <td><img src="images/animationnotebook.png" /></td><td><h1>animations</h1></td>
  </tr>
</table>
</div>
<a class="showtoclink" href="animations-frames.html">show toc</a>
<div class="intro-section">
<p>WPF/E enables you to use markup to define animations.&nbsp; This QuickStart introduces WPF/E animation features and
walks you through the process of creating your first WPF/E animation.&nbsp;
</p>
<p>This QuickStart contains the following sections.</p>
<ul>
<li><a href="#walkthrough">walkthrough: animate an object</a></li>
<ul>
<li><a href="#step1">step 1: find something to animate</a></li>
<li><a href="#step2">step 2: create an EventTrigger</a></li>
<li><a href="#step3">step 3: create a Storyboard and an animation</a></li>
</ul>
<li><a href="#otheranimationtypes">other types of animations</a></li>
<li><a href="#timelineproperties">properties of Timelines</a></li>
<li><a href="#fromtobyanimations">specify animation transition values</a></li>
<li><a href="#whatsnext">what's next?</a></li>
</ul>
</div>

<div class="section">
<a name="#walkthrough"></a><h3>walkthrough: animate an object</h3>


<a name="#step1"></a><h4>step 1: find something to animate</h4>
<p>First,
you&#39;ll need something to animate. Let&#39;s use an <span class="api-name">Ellipse</span>. The
following example creates an <span class="api-name">Ellipse</span> and paints it black.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml0_hyperlink' onclick="toggleCode('xaml0','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for animation-ellipse.xaml-->
<pre id='xaml0' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><strong><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"ellipse"</span></strong>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span>
      <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"black"</span> <span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag0_hyperlink' onclick="toggle_ag0()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag0_restart' onclick="restart_ag0();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag0Host">
    </div>

    <script type="text/javascript">
    var ag0visible = !(true);

    function toggle_ag0() {
        var text = "preview";
        if (ag0visible) {
            ag0visible = false;

            var element = document.getElementById("ag0Host");
            element.style.display = "none";
			element = document.getElementById("ag0_restart");
            element.style.display = "none";


            document.getElementById("ag0_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag0Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag0", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/animation-ellipse.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag0Host");
            element.style.display = "";
            ag0visible = true;
			element = document.getElementById("ag0_restart");
            element.style.display = "";
            document.getElementById("ag0_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag0() {

	            new agHost(
	                "ag0Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag0", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/animation-ellipse.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag0visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag0();
    </script>

<p>Notice that the ellipse has a name:  </p>
<p class="text-in-list1"><code>x:Name=&quot;ellipse&quot;</code></p>
<p>The ellipse needs a name so that it can be animated. Now that you have an object
to animate, the next step is to create an <span class="api-name">EventTrigger</span> that will
start the animation. </p>



<a name="step2"></a><h4>step 2: create an EventTrigger</h4>
<p>An <span class="api-name">EventTrigger</span>
performs an action when something triggers it. As its name implies, that
&quot;something&quot; is an event, specified by its <span class="api-name">RoutedEvent</span> property.
Because you want the <span class="api-name">EventTrigger</span> to start an animation, use a <span class="api-name">BeginStoryboard</span> as
its action.</p>
<p>You also need to decide which event will trigger the animation. Today, that&#39;s pretty easy, because <span class="api-name">EventTrigger</span> objects only support one
event, the <span class="api-name">Loaded</span> event, so we&#39;ll set the <span class="api-name">RoutedEvent</span> property to <code>Canvas.Loaded</code>.
(Eventually there will be other things that can
trigger animations to start.)&nbsp; This will start our animation when the main
<span class="api-name">Canvas</span> loads. The following example shows the markup thus far.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml1_hyperlink' onclick="toggleCode('xaml1','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for animation-triggers.xaml-->
<pre id='xaml1' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
<strong>  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger</span> <span class='code-red'>RoutedEvent</span><span class='code-blue'>=</span><span class='code-blue'>"Canvas.Loaded"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
</strong>          
          <span class='code-blue'>&lt;!--</span><span class='code-green'> Insert Storyboard here. </span><span class='code-blue'>--&gt;</span>
<strong>        <span class='code-blue'>&lt;/</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
</strong>  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"ellipse"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span>
      <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"black"</span><span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag1_hyperlink' onclick="toggle_ag1()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag1_restart' onclick="restart_ag1();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag1Host">
    </div>

    <script type="text/javascript">
    var ag1visible = !(true);

    function toggle_ag1() {
        var text = "preview";
        if (ag1visible) {
            ag1visible = false;

            var element = document.getElementById("ag1Host");
            element.style.display = "none";
			element = document.getElementById("ag1_restart");
            element.style.display = "none";


            document.getElementById("ag1_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag1Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag1", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/animation-triggers.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag1Host");
            element.style.display = "";
            ag1visible = true;
			element = document.getElementById("ag1_restart");
            element.style.display = "";
            document.getElementById("ag1_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag1() {

	            new agHost(
	                "ag1Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag1", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/animation-triggers.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag1visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag1();
    </script>

<p>Now you&#39;re ready to create a <span class="api-name">Storyboard</span> and an animation. </p>


<a name="step3"></a><h4>step 3: create a Storyboard and an animation</h4>
<p>A <span class="api-name">Storyboard</span> can describe and control one or more animations. For this example, we&#39;ll just use one animation. In WPF/E,
you animate by applying animations to properties. Use a <span class="api-name">DoubleAnimation</span> to
animate the <span class="api-name">Canvas.Left</span> property of the <span class="api-name">Ellipse</span>.
You use a <span class="api-name">DoubleAnimation</span> because the property
being animated, <span class="api-name">Canvas.Left</span>, is of type
<span class="api-name">Double</span> (a double precision floating point number). </p>
<p>For the animation to operate, give it a target name (<code>Storyboard.TargetName=&quot;ellipse&quot;</code>), a target property (<code>Storyboard.TargetProperty=&quot;(Canvas.Left)&quot;</code>), a value to animate to (<code>To=&quot;300&quot;</code>),
and a <span class="api-name">Duration</span> (<code>Duration=&quot;0:0:1&quot;</code>). The
<span class="api-name">Duration</span> property specifies the length of time the
animation takes to transition from its starting value to its ending value. A
value of <code>0:0:1</code> specifies a
<span class="api-name">Duration</span> of one second.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml2_hyperlink' onclick="toggleCode('xaml2','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for animation-double.xaml-->
<pre id='xaml2' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger</span> <span class='code-red'>RoutedEvent</span><span class='code-blue'>=</span><span class='code-blue'>"Canvas.Loaded"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
<strong>          <span class='code-blue'>&lt;</span><span class='code-brown'>Storyboard</span><span class='code-blue'>&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> 
              <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"ellipse"</span>
              <span class='code-red'>Storyboard.TargetProperty</span><span class='code-blue'>=</span><span class='code-blue'>"(Canvas.Left)"</span>
              <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Duration</span><span class='code-blue'>=</span><span class='code-blue'>"0:0:1"</span> <span class='code-blue'>/&gt;</span>
          <span class='code-blue'>&lt;/</span><span class='code-brown'>Storyboard</span><span class='code-blue'>&gt;</span>
</strong>        <span class='code-blue'>&lt;/</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"ellipse"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span>
      <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"black"</span><span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag2_hyperlink' onclick="toggle_ag2()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag2_restart' onclick="restart_ag2();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag2Host">
    </div>

    <script type="text/javascript">
    var ag2visible = !(true);

    function toggle_ag2() {
        var text = "preview";
        if (ag2visible) {
            ag2visible = false;

            var element = document.getElementById("ag2Host");
            element.style.display = "none";
			element = document.getElementById("ag2_restart");
            element.style.display = "none";


            document.getElementById("ag2_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag2Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag2", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/animation-double.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag2Host");
            element.style.display = "";
            ag2visible = true;
			element = document.getElementById("ag2_restart");
            element.style.display = "";
            document.getElementById("ag2_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag2() {

	            new agHost(
	                "ag2Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag2", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/animation-double.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag2visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag2();
    </script>

<p>You used <span class="api-name">DoubleAnimation</span> because the property we are animating, <span class="api-name">Canvas.Left</span>,
is of type <span class="api-name">Double</span> (A <span class="api-name">Double</span> is a double precision floating point
number).&nbsp; </p>
<p><strong>Contratulations!</strong> You&#39;ve just created your first WPF/E animation.
Read on if you&#39;d like to learn more about the WPF/E animation system. </p>
</div>

<div class="section">
<a name="otheranimationtypes"></a><h3>other types of animations</h3>
<p>WPF/E also supports animating colors (<span class="api-name">ColorAnimation</span>) and points (<span class="api-name">PointAnimation</span>).&nbsp; When animating colors, remember the difference between a color and the <span class="api-name">SolidColorBrush</span>.&nbsp;
When you specify a color name or hexadecimal value to set a shape&#39;s <span class="api-name">Stroke</span> and <span class="api-name">Fill</span>
properties, WPF/E converts that string into a <span class="api-name">SolidColorBrush</span>.&nbsp;
To animate shape&#39;s <span class="api-name">Stroke</span> or <span class="api-name">Fill</span>,
you need to animate the <span class="api-name">Color</span> property of the <span class="api-name">SolidColorBrush </span>
you used to set that property. In general, when you want to animate a property
that takes a brush, its best to use the more verbose syntax when declaring that
brush rather than a color name or hexadecimal value, so that you can assign it a
name.&nbsp;&nbsp; </p>
<p>The following example animates the color of two ellipses. The <span class="api-name">Fill</span> of the
first ellipse is explicitly set using a <span class="api-name">SolidColorBrush</span>. The example gives the
<span class="api-name">SolidColorBrush</span> a name and animates its <span class="api-name">Color</span> property. The second animation is
slightly more complex, because the <span class="api-name">Fill</span> of the second ellipse is set using a color name.
When the markup runs, the system creates a <span class="api-name">SolidColorBrush</span> of the appropriate
color and uses it to paint the ellipse. Because there is no <code>&lt;SolidColorBrush&gt;</code> tag
to name, the system-generated <span class="api-name">SolidColorBrush</span> can only be animated by using
indirect property targeting.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml3_hyperlink' onclick="toggleCode('xaml3','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for animation-point-color.xaml-->
<pre id='xaml3' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger</span> <span class='code-red'>RoutedEvent</span><span class='code-blue'>=</span><span class='code-blue'>"Canvas.Loaded"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
          <span class='code-blue'>&lt;</span><span class='code-brown'>Storyboard</span><span class='code-blue'>&gt;</span>
            <span class='code-blue'>&lt;</span><strong><span class='code-brown'>ColorAnimation</span></strong> 
               <strong><span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e1_brush"</span></strong>
               <strong><span class='code-red'>Storyboard.TargetProperty</span><span class='code-blue'>=</span><span class='code-blue'>"Color"</span></strong>
               <span class='code-red'>From</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span> <span class='code-red'>Duration</span><span class='code-blue'>=</span><span class='code-blue'>"0:0:5"</span> <span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><strong><span class='code-brown'>ColorAnimation</span></strong> 
               <strong><span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e2"</span></strong>
               <strong><span class='code-red'>Storyboard.TargetProperty</span><span class='code-blue'>=</span><span class='code-blue'>"(Fill).(Color)"</span></strong>
               <span class='code-red'>From</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span> <span class='code-red'>Duration</span><span class='code-blue'>=</span><span class='code-blue'>"0:0:5"</span> <span class='code-blue'>/&gt;</span>
          <span class='code-blue'>&lt;/</span><span class='code-brown'>Storyboard</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;/</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span><span class='code-blue'>&gt;</span>
<strong>    <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse.Fill</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>SolidColorBrush</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e1_brush"</span> <span class='code-red'>Color</span><span class='code-blue'>=</span><span class='code-blue'>"black"</span><span class='code-blue'>/&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Ellipse.Fill</span><span class='code-blue'>&gt;</span>
</strong>  <span class='code-blue'>&lt;/</span><span class='code-brown'>Ellipse</span><span class='code-blue'>&gt;</span>
  
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <strong><span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e2"</span></strong> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"100"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"130"</span><span class='code-blue'>/&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag3_hyperlink' onclick="toggle_ag3()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag3_restart' onclick="restart_ag3();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag3Host">
    </div>

    <script type="text/javascript">
    var ag3visible = !(true);

    function toggle_ag3() {
        var text = "preview";
        if (ag3visible) {
            ag3visible = false;

            var element = document.getElementById("ag3Host");
            element.style.display = "none";
			element = document.getElementById("ag3_restart");
            element.style.display = "none";


            document.getElementById("ag3_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag3Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag3", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/animation-point-color.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag3Host");
            element.style.display = "";
            ag3visible = true;
			element = document.getElementById("ag3_restart");
            element.style.display = "";
            document.getElementById("ag3_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag3() {

	            new agHost(
	                "ag3Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag3", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/animation-point-color.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag3visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag3();
    </script>

</div>

<div class="section">
<a name="timelineproperties"></a><h3>properties of Timelines</h3>
<p>Both <span class="api-name">Storyboard</span> and <span class="api-name">DoubleAnimation</span> are types
of <span class="api-name">Timeline</span> objects. Timelines have a number of useful
properties:</p>
<ul>
	<li><span class="api-name">Storyboard.TargetName</span>: The name of the
	object you&#39;re animating.&nbsp; If you don&#39;t specify a <span class="api-name">Storyboard.TargetName</span>,
	the timeline uses the <span class="api-name">Storyboard.TargetName</span> of
	its parent timeline. If you didn&#39;t specify a <span class="api-name">Storyboard.TargetName</span>
	for any of its parent timelines, the timeline targets the element that owns
	the <span class="api-name">EventTrigger</span> that starts it.</li>
	<li><span class="api-name">Storyboard.TargetProperty</span>: The property you&#39;re animating.&nbsp;
	If you don&#39;t specify a <span class="api-name">Storyboard.TargetProperty</span>,
	the timeline uses the <span class="api-name">Storyboard.TargetProperty</span>
	of its parent timeline. &nbsp;
	The syntax for this property varies, depending on the type of property being animated.
	<ul>


	<li>To target an attached property, use the following syntax: <code>"(<i>ownerType</i>.<i>propertyName</i>)"</code>.
	For example, "(Canvas.Top)" targets the <span class="api-name">Canvas.Top</span> property.</li>

			<li>To target any other type of property, use the following syntax: <code>"<i>propertyName</i>"</code>.
		For example, <code>"Opacity"</code> targets the <span class="api-name">Opacity</span> property.</li>

	</ul>
	</li>
	<li><span class="api-name">BeginTime</span>: The time at which the timeline
	should start.&nbsp; Be careful about your
syntax here because the default unit of measure is &quot;days&quot; (simply setting this property to <code>&quot;2&quot;</code> results
	in a <span class="api-name">BeginTime</span> of 2 days!).
Use the following syntax to specify hours, minutes, and seconds: <code><i>hours</i>:<i>minutes</i>:<i>seconds</i></code>. For example, <code>&quot;0:0:2&quot;</code>
	specifies a <span class="api-name">BeginTime</span> of 2 seconds (zero hours, zero minutes, 2 seconds).
	If you don&#39;t specify a <span class="api-name">BeginTime</span>, the property
	value defaults to 0 seconds. </li>
	<li><span class="api-name">Duration</span>: The length of time the timeline
	should take to play forward once. For an animation, this is the length of
	time it takes to play from its starting value to its ending value. The <span class="api-name">Duration</span>
	property uses the same syntax as the <span class="api-name">BeginTime</span>
	property. Again, be careful not to
specify days when you mean seconds!&nbsp; <span class="api-name">Duration</span> can also be set to the special values <code>&quot;Forever&quot;</code>
or <code>&quot;Automatic&quot;</code>. The default value is <code>&quot;Automatic&quot;</code>.
	For information about these special values, see the <span class="api-name">Duration</span>
	object in the WPF/E SDK.</li>
	<li><span class="api-name">FillBehavior</span>: How a timeline should behave
	when it stops playing. This property takes one of two values, <code>Stop</code> or
	<code>HoldEnd</code>.&nbsp;
<code>&quot;Stop&quot;</code> returns the property value to the value it held
	before the animation began; <code>&quot;HoldEnd&quot;</code>
	indicates that the animated property will stay at the final value of the
	animation. The default value is <code>&quot;HoldEnd&quot;</code>.</li>
	<li><span class="api-name">RepeatBehavior</span>: Indicates how frequently the timeline
	should repeat. This property can take three types of values: an iteration count, a
	time value, or the special value <code>Forever</code>.
	<ul><li><code>&quot;Forever&quot;</code>
	makes the timeline to repeat indefinitely.&nbsp;</li>
	<li>A time value makes the
	timeline play for the specified length of time. For example, setting <span class="api-name">RepeatBehavior</span>
	to <code>&quot;0:0:5&quot;</code> for an animation with a <span class="api-name">Duration</span> of
	2.5 seconds makes the animation repeat twice.</li>
	<li>An iteration value makes the
	timeline play for the specified number of iterations. You express iteration
	values using the following syntax: <code><i><italic>iterationCount</italic></i>x</code>.
	For example, a value of <code>&quot;4x&quot;</code> makes the timeline repeat four times.</li></ul>
	The default value is <code>"1x"</code>, which makes the timeline play once.</li>
</ul>
<p>The following example demonstrates these timeline properties.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml4_hyperlink' onclick="toggleCode('xaml4','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for animation-timelines.xaml-->
<pre id='xaml4' class='xaml'><span class='collapsedXaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger</span> <span class='code-red'>RoutedEvent</span><span class='code-blue'>=</span><span class='code-blue'>"Canvas.Loaded"</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
</span>          <span class='code-blue'>&lt;</span><span class='code-brown'>Storyboard</span> 
              <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e1"</span>
              <span class='code-red'>Storyboard.TargetProperty</span><span class='code-blue'>=</span><span class='code-blue'>"(Canvas.Left)"</span>
              <span class='code-red'>BeginTime</span><span class='code-blue'>=</span><span class='code-blue'>"0:0:1"</span><span class='code-blue'>&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <strong><span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e2"</span></strong><span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"80"</span> <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e3"</span> <strong><span class='code-red'>Storyboard.TargetProperty</span><span class='code-blue'>=</span><span class='code-blue'>"Width"</span></strong><span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <strong><span class='code-red'>From</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span></strong> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e4"</span><span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <strong><span class='code-red'>Duration</span><span class='code-blue'>=</span><span class='code-blue'>"0:0:5.3"</span></strong> <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e5"</span><span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <strong><span class='code-red'>FillBehavior</span><span class='code-blue'>=</span><span class='code-blue'>"HoldEnd"</span></strong> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e6"</span><span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <strong><span class='code-red'>FillBehavior</span><span class='code-blue'>=</span><span class='code-blue'>"Stop"</span></strong> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e7"</span><span class='code-blue'>/&gt;</span>
            <span class='code-blue'>&lt;</span><span class='code-brown'>DoubleAnimation</span> <strong><span class='code-red'>RepeatBehavior</span><span class='code-blue'>=</span><span class='code-blue'>"Forever"</span></strong> <span class='code-red'>To</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Storyboard.TargetName</span><span class='code-blue'>=</span><span class='code-blue'>"e8"</span><span class='code-blue'>/&gt;</span>
          <span class='code-blue'>&lt;/</span><span class='code-brown'>Storyboard</span><span class='code-blue'>&gt;</span>
<span class='collapsedXaml'>        <span class='code-blue'>&lt;/</span><span class='code-brown'>BeginStoryboard</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger.Actions</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>EventTrigger</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas.Triggers</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e1"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span><span class='code-blue'>&gt;</span><span class='code-black'>e1</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e2"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"50"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"50"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span><span class='code-blue'>&gt;</span><span class='code-black'>e2</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e3"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Purple"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"70"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Purple"</span><span class='code-blue'>&gt;</span><span class='code-black'>e3</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e4"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span><span class='code-blue'>&gt;</span><span class='code-black'>e4</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e5"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Green"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"110"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Green"</span><span class='code-blue'>&gt;</span><span class='code-black'>e5</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e6"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"130"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"130"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Black"</span><span class='code-blue'>&gt;</span><span class='code-black'>e6</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e7"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Orange"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"150"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"150"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Orange"</span><span class='code-blue'>&gt;</span><span class='code-black'>e7</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Ellipse</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"e8"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span>
      <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"170"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"170"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Red"</span><span class='code-blue'>&gt;</span><span class='code-black'>e8</span><span class='code-blue'>&lt;/</span><span class='code-brown'>TextBlock</span><span class='code-blue'>&gt;</span>
<span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</span></pre>



    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag4_hyperlink' onclick="toggle_ag4()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag4_restart' onclick="restart_ag4();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag4Host">
    </div>

    <script type="text/javascript">
    var ag4visible = !(true);

    function toggle_ag4() {
        var text = "preview";
        if (ag4visible) {
            ag4visible = false;

            var element = document.getElementById("ag4Host");
            element.style.display = "none";
			element = document.getElementById("ag4_restart");
            element.style.display = "none";


            document.getElementById("ag4_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag4Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag4", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/animation-timelines.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag4Host");
            element.style.display = "";
            ag4visible = true;
			element = document.getElementById("ag4_restart");
            element.style.display = "";
            document.getElementById("ag4_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag4() {

	            new agHost(
	                "ag4Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag4", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/animation-timelines.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag4visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag4();
    </script>

</div>
</div>

<div class="section">
<a name="fromtobyanimations"></a><h3>specify animation transition values</h3>
<p><span class="api-name">DoubleAnimation</span>, <span class="api-name">ColorAnimation</span>, and <span class="api-name">PointAnimation</span>
have <span class="api-name">From</span> and <span class="api-name">To</span> properties that specify the beginning and ending values of the property to
animate.&nbsp; If <span class="api-name">From</span> is not specified, the current value of the property
to be animated is used as the animation&#39;s starting value. Instead of setting an ending value
using the <span class="api-name">To</span> property, you may use the
<span class="api-name">By</span> property to set an offset amount. </p>
</div>


<div class="section">
<a name="whatsnext"></a><h3>what's next</h3>
<p> The next topic, <a href="scripting-noframes.html">scripting</a>, describes how
to make your WPF/E content interactive. </p>
</div>

<div class="copyright-section">
<p>Copyright © 2007 Microsoft Corporation.
All rights reserved. <a href="http://www.microsoft.com/info/cpyright.htm" target="new">Legal Notices</a>.</p>
</div>

    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 5; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>
</body>

</html>
